<script>
import axios from "axios";

export default {
  name: "DynamicDetail",
  props: ['id'],
  data() {
    return {
      dynamic: {
        review_list: [{haveReview: false}]
      },
      reviewIndex: '',
      pl_input: '',
      loading: false,
      hotOrTime: true,
    }
  },
  methods: {
    getDynamic() {
      this.loading = true
      axios.get("/api/dynamic/getDynamic/" + this.id)
          .then(res => {
            this.loading = false
            if (res.data.code === 0) {
              this.hotOrTime = true
              this.dynamic = res.data.data
            } else {
              this.$message.warning(res.data.msg)
              this.$emit('back')
            }
          }).catch(err => this.$message.error(err))
    },
    follow(fid) {
      axios.get(`/api/friends/add/${fid}`)
          .then(() => {
            this.dynamic.isFriend = true
            let date = new Date()
            this.$bus.$emit("sendMessage", {
              uid: fid,
              time: `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}${String(date.getHours()).padStart(2, '0')}${String(date.getMinutes()).padStart(2, '0')}`,
              context: `${this.$store.state.user.nickname}关注了你`
            })
            let formData = new FormData()
            formData.set("fid", fid)
            formData.set("content", `${this.$store.state.user.nickname}关注了你`)
            axios.post("/api/chat/add", formData)
            this.$message.success("已关注对方")
          })
          .catch(err => this.$message.error(err))
    },
    exitBigPic(e) {
      let div = e.target
      if (div.tagName === 'IMG')
        div = div.parentNode
      div.style.display = 'none'
    },
    showBigPic(e) {
      let big = document.getElementsByClassName('big_pic')[0]
      big.parentNode.style.display = 'flex'
      big.src = e.target.src
    },
    dzClick2(e, id, c_index) {
      let div = e.target
      if (div.tagName !== 'I') {
        div = div.firstElementChild
      }
      if (div.classList.contains('icon-dianzan')) {
        axios.get(`api/review/like/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan')
                div.classList.add('icon-dianzan_kuai')
                div.classList.add('f_color')
                this.dynamic.review_list[c_index].likes++
              } else {
                this.$message.warning(res.data.msg)
              }
            })

      } else {
        axios.get(`api/review/unlike/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan_kuai')
                div.classList.remove('f_color')
                div.classList.add('icon-dianzan')
                this.dynamic.review_list[c_index].likes--
              } else {
                this.$message.warning(res.data.msg)
              }
            })
      }
    },
    dzClick1(e, id) {
      let div = e.target
      if (div.tagName !== 'I') {
        div = div.firstElementChild
      }
      if (div.classList.contains('icon-dianzan')) {
        axios.get(`api/dynamic/like/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan')
                div.classList.add('icon-dianzan_kuai')
                this.dynamic.likes++
                div.classList.add('f_color')
              } else {
                this.$message.warning(res.data.msg)
              }
            })

      } else {
        axios.get(`api/dynamic/unlike/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan_kuai')
                div.classList.remove('f_color')
                div.classList.add('icon-dianzan')
                this.dynamic.likes--
              } else {
                this.$message.warning(res.data.msg)
              }
            })
      }
    },
    review(id) {
      axios.get(`/api/review/${id}/${this.pl_input}`)
          .then(res => {
            if (res.data.code === 0) {
              this.$message.success('评论成功')
              this.hotOrTime = false
              this.rdPxClick(id)
              this.pl_input = ''
            } else {
              this.$message.warning(res.data.msg)
            }
          })
    },
    rdPxClick(id) {
      if (this.hotOrTime) {
        axios.get(`/api/review/hot/all/${id}`)
            .then(res => this.dynamic.review_list = res.data.data)
            .catch(err => this.$message.error(err))
      } else {
        axios.get(`/api/review/time/all/${id}`)
            .then(res => this.dynamic.review_list = res.data.data)
            .catch(err => this.$message.error(err))
      }
    },
    del(id) {
      axios.get(`/api/review/del/${id}`)
          .then(() => {
            this.$message.success("删除成功")
            this.getDynamic()
          })
          .catch(err => this.$message.error(err))
    },
    setHaveReview() {
      this.dynamic.review_list[this.reviewIndex].haveReview = true
    }
  },
  mounted() {
    this.$bus.$on("setHaveReview", this.setHaveReview)
    this.getDynamic();
  },
  beforeDestroy() {
    this.$bus.$off("setHaveReview")
  }
}
</script>

<template>
  <div>
    <div class="cont_cont_box" v-loading="loading">
      <div class="back" @click="$emit('back')"><i class="el-icon-back"></i>返回</div>
      <div class="ccb_top">
        <el-avatar :src="dynamic.avatar"
                   class="ccb_avatar"></el-avatar>
        <div class="ccb_top_right">
          <div class="ccb_nick">{{ dynamic.nickname }}
            <button class="gz_btn" v-if="dynamic.uid !== $store.state.user.id" :disabled="dynamic.isFriend"
                    @click="follow(dynamic.uid)">
              {{ dynamic.isFriend ? '已关注' : '关注' }}
            </button>
          </div>
          <div class="ccb_time">{{ dynamic.time }}</div>
        </div>
      </div>
      <div class="ccb_text_box">
        {{ dynamic.content }}
      </div>
      <div class="ccb_pic_box">
        <div class="pic_box_item" v-for="(item,index) in dynamic.attachments" :key="index">
          <img class="small_pic" :src="item" alt=""
               @click="showBigPic">
        </div>
      </div>
      <div class="ccb_cz_box">
        <div class="cz_box"><i class="iconfont icon-fenxiang1"></i>快转</div>
        <div class="cz_box cz_box_c" @click="getDynamic"><i class="iconfont icon-pinglun"></i> 评论</div>
        <div class="cz_box" @click="dzClick1($event,dynamic.id)"><i
            :class="dynamic.isLiked?'iconfont icon-dianzan_kuai f_color':'iconfont icon-dianzan' "></i> {{
            dynamic.likes
          }}
        </div>
      </div>
      <div>
        <div class="part_line"></div>
        <div class="pl_box">
          <div class="pl_k">
            <el-avatar class="pl_avatar" :src="$store.state.user.avatar"></el-avatar>
            <el-input placeholder="发布你的评论" class="pl_input" autosize v-model="pl_input"
                      resize="none" :maxlength="256"></el-input>
            <button class="pl_btn" @click="review(dynamic.id)">评论</button>

          </div>
        </div>
        <div>
          <div class="part_line"></div>
          <div class="qb_pl_box">
            <div class="px_xx" v-if="dynamic.review_list.length > 0">
              <a :class="hotOrTime?'px_xx_c':''" @click="hotOrTime=true;rdPxClick(dynamic.id)">按热度</a>
              <a :class="hotOrTime?'':'px_xx_c'" @click="hotOrTime=false;rdPxClick(dynamic.id)">按时间</a>
            </div>
            <div class="px_xq" v-for="(r_item,r_index) in dynamic.review_list" :key="r_index">
              <el-avatar class="px_xq_avatar" :src="r_item.avatar"></el-avatar>
              <div class="px_xq_r">
                <div class="pl_nr">
                  <span>{{ r_item.nickname }}</span>:
                  {{ r_item.content }}
                </div>
                <div class="px_xq_b">
                  <div class="pl_time">{{ r_item.time }}</div>
                  <div class="pl_xq_cz">
                    <i @click="del(r_item.id)" class="el-icon-delete" v-show="r_item.uid === $store.state.user.id"></i>
                    <i class="iconfont icon-fenxiang1"></i>
                    <i class="iconfont icon-pinglun" @click="reviewIndex=r_index;$emit('setReview',r_item)"></i>
                    <span><i :class="r_item.isLiked?'iconfont icon-dianzan_kuai f_color':'iconfont icon-dianzan' "
                             @click="dzClick2($event,r_item.id,r_index)"></i>{{ r_item.likes }}</span>
                  </div>
                </div>
                <div class="zk_hf" v-if="r_item.haveReview" @click="$emit('setRecover',r_item)">查看回复</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped>
.back {
  margin-bottom: 30px;
  margin-left: 30px;
  cursor: pointer;
  width: 60px;
}

.back i {
  margin-right: 6px;
}

.back:hover {
  color: #409EFF;
}
</style>